<template>
    <panel title="订单">
        <!-- 搜索条件 -->
        <el-form :inline='true'>
            <el-form-item label="订单号">
                <el-input v-model="seach.orderNo"></el-input>
            </el-form-item>

            <el-form-item label="收货人">
                <el-input v-model="seach.consignee"></el-input>
            </el-form-item>

            <el-form-item label="手机">
                <el-input v-model="seach.phone"></el-input>
            </el-form-item>

            <el-form-item label="订单状态">
                <el-select v-model="seach.orderState" placeholder="请选择">
                    <el-option label="已受理" value="已受理"></el-option>
                    <el-option label="派送中" value="派送中"></el-option>
                    <el-option label="已完成" value="已完成"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="选择时间">
                <el-date-picker
                v-model="seach.date"
                :picker-options="pickerOptions"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button @click="getorderlist">查询</el-button>
            </el-form-item>

            <el-table :data="orderList">
                <el-table-column label="订单号" prop="orderNo"></el-table-column>
                <el-table-column label="收货人" prop="consignee"></el-table-column>
                <el-table-column label="电话" prop="phone"></el-table-column>
                <el-table-column label="订单状态" prop="orderState"></el-table-column>
                <el-table-column label="创建时间" prop="orderTime">
                    <template slot-scope="{row}">
                        {{row.orderTime | fomatDate}}
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
            @current-change="pageChange"
            :current-page="pageinfo.currentPage"
            :page-size="pageinfo.pageSize"
            @size-change="sizeChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-form>
    </panel>
</template>

<script>
import { orderlistReq } from "../../api/order.api.js";
import { clearObject } from "../../utils/common.js";
import dayjs from "dayjs";
export default {
  data() {
    return {
      pageinfo: {
        currentPage: 1,
        pageSize: 5
      },
      seach: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: ""
      },
      orderList: [],
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: ""
    };
  },
  methods: {
    // 每页多少条
    sizeChange(pageSize) {
      this.pageinfo.pageSize = pageSize;
      this.getorderlist();
    },

    // 页码的改变
    pageChange(currentPage) {
      // 改变页码
      this.pageinfo.currentPage = currentPage;
      this.getorderlist();
    },
    getorderlist() {
      // 合并查询条件
      const params = { ...this.pageinfo, ...this.seach };
      //   数据清洗
      clearObject(params);
      //   对date进行格式化
      if (params.date) {
        // 根据原数组得到一个新数组
        params.date = JSON.stringify(
          params.date.map(item => dayjs(item).format("YYYY-MMM-DD HH-mm-ss"))
        );
      }
      orderlistReq(params).then(res => {
        this.orderList = res.data.data;
        this.total = res.data.total;
      });
    }
  },
  filters: {
    fomatDate(val) {
      return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  created() {
    this.getorderlist();
  }
};
</script>

<style lang="less" scoped>
</style>